<template>
	<div>
		<div class="ui segments m-box">
			<div class="ui card">
				<div class="image">
					<img :src="introduction.avatar">
				</div>
				<div class="content" align="center">
					<div class="header">{{ introduction.name }}</div>
					<!--彩色滚动字体-->
					<div id="rollText" class="m-margin-top" style="font-size: 15px;" v-if="introduction.rollText.length!=0"></div>
				</div>
				<div class="extra content" align="center">
					<a :href="introduction.github" v-if="introduction.github" target="_blank" class="ui circular icon button">
						<svg style="width: 1em!important;height: 1em!important;" t="1588657335874" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6878" width="200" height="200">
							<path d="M0 520.886c0-69.368 13.51-135.697 40.498-199.02 26.987-63.323 63.322-117.826 109.006-163.51 45.65-45.65 100.154-81.985 163.51-109.006A502.289 502.289 0 0 1 512 8.92c69.335 0 135.663 13.477 198.986 40.497 63.356 26.988 117.86 63.323 163.51 109.007 45.684 45.65 82.02 100.154 109.006 163.51A502.289 502.289 0 0 1 1024 520.852c0 111.318-32.504 211.472-97.511 300.494-64.975 88.989-148.48 150.825-250.484 185.476-5.351 0-9.348-0.99-11.99-2.973-2.676-1.982-4.196-3.997-4.526-6.012a59.458 59.458 0 0 1-0.495-8.984 7.663 7.663 0 0 1-0.991-3.006v-128.99c0-40.63-14.336-75.314-43.008-103.986 76.667-13.345 134.011-41.819 171.999-85.487 37.987-43.669 57.013-96.52 57.013-158.522 0-58.005-18.663-108.346-56.022-150.99 13.345-42.678 11-87.668-6.97-135.003-18.697-1.322-39.011 1.85-61.01 9.513-22 7.663-38.318 14.831-49.02 21.47-10.637 6.673-20.316 13.016-28.97 19.027-38.68-10.669-81.854-16.02-129.486-16.02-47.7 0-90.509 5.351-128.529 16.02-7.333-5.35-15.855-11.164-25.5-17.507-9.68-6.342-26.493-14.005-50.507-22.99-23.982-9.018-45.65-12.85-65.008-11.495-18.663 47.996-20.645 93.646-5.979 136.984-36.665 42.678-54.998 92.986-54.998 150.99 0 62.002 18.663 114.689 55.99 157.994 37.326 43.339 94.67 72.01 171.998 86.016a142.303 142.303 0 0 0-39.969 70.029c-56.683 13.972-96.355 3.963-119.015-30.06-42.017-61.308-79.674-83.307-113.003-65.965-4.69 4.657-3.997 9.48 1.982 14.501 6.012 4.988 14.996 11.66 27.02 19.985 11.99 8.357 20.976 17.507 26.987 27.515 0.661 1.322 2.51 6.177 5.517 14.502a831.917 831.917 0 0 0 8.985 23.981c2.973 7.663 8.654 16.186 17.011 25.5 8.324 9.349 18.003 17.178 29.003 23.52 11 6.309 26.161 11 45.485 14.006 19.324 2.972 41.323 3.138 65.998 0.495v100.484c0 0.991-0.165 2.643-0.495 5.021-0.33 2.312-0.991 3.964-1.982 4.955-0.991 1.024-2.345 2.015-4.03 3.039a12.52 12.52 0 0 1-6.474 1.486c-2.676 0-6.012-0.33-10.009-0.99-101.343-35.345-183.825-97.182-247.51-185.51C31.842 731.037 0 631.577 0 520.92z"
							      p-id="6879"></path>
						</svg>
					</a>
					<a :href="introduction.qq" v-if="introduction.qq" target="_blank" class="ui circular icon button">
						<svg style="width: 1em!important;height: 1em!important;" t="1588658755157" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6709" width="200" height="200">
							<path d="M511.03745067 986.9408c-85.50293333 0-163.98613333-26.68693333-214.51733334-66.54506667-25.6608 7.1488-58.4864 18.65493333-79.20213333 32.9216-17.7248 12.2016-15.51573333 24.6464-12.32 29.6704 14.02666667 22.06826667 240.62186667 14.09173333 306.03946667 7.21813334v-3.26506667z" fill="#FAAD08" p-id="6710"></path>
							<path d="M495.62731733 986.9408c85.5008 0 163.98613333-26.68693333 214.51733334-66.54506667 25.6608 7.1488 58.48533333 18.65493333 79.2032 32.9216 17.72373333 12.2016 15.51253333 24.6464 12.32 29.6704-14.02666667 22.06826667-240.62293333 14.09173333-306.0416 7.21813334v-3.26506667z" fill="#FAAD08" p-id="6711"></path>
							<path d="M496.137184 472.0256c140.7296-0.9344 253.5136-27.50186667 291.73013333-37.696 9.1104-2.432 13.984-6.78826667 13.984-6.78826667 0.032-1.25013333 0.57813333-22.3488 0.57813334-33.232C802.42945067 211.02186667 713.733984 26.8512 495.61665067 26.83946667 277.500384 26.8512 188.80065067 211.0208 188.80065067 394.30933333c0 10.8832 0.5504 31.98186667 0.58346666 33.232 0 0 3.9648 4.07573333 11.23093334 6.048 35.2832 9.57866667 150.18986667 37.4816 294.48533333 38.43626667h1.0368z" fill="#000000" p-id="6712"></path>
							<path d="M883.50145067 626.96746667c-8.66133333-27.82506667-20.48426667-60.27306667-32.45546667-91.43466667 0 0-6.8864-0.848-10.36586667 0.15786667-107.424 31.152-237.62453333 51.00586667-336.8448 49.808h-1.02613333C404.14465067 586.6848 274.82731733 567.05813333 167.76491733 536.2112 163.67425067 535.03466667 155.59745067 535.53386667 155.59745067 535.53386667 143.62625067 566.6944 131.804384 599.1424 123.14411733 626.96746667 81.84491733 759.64586667 95.22411733 814.5536 105.41291733 815.78453333c21.8624 2.63893333 85.09866667-99.87946667 85.09866667-99.87946666 0 104.17066667 94.21226667 264.1248 309.94773333 265.59573333a765.87733333 765.87733333 0 0 1 5.7248 0C721.92171733 980.02986667 816.130784 820.0768 816.130784 715.90613333c0 0 63.23626667 102.5184 85.10186667 99.87946667 10.18666667-1.23093333 23.56586667-56.13866667-17.7312-188.81813333" fill="#000000" p-id="6713"></path>
							<path d="M429.20811733 303.91146667c-29.76 1.32266667-55.19466667-32.11306667-56.78933333-74.61973334-1.6192-42.53546667 21.18186667-78.08746667 50.94826667-79.4176 29.73333333-1.3056 55.14986667 32.11626667 56.76586666 74.63893334 1.6288 42.53546667-21.17653333 78.08-50.9248 79.3984m220.448-74.61973334c-1.5936 42.50666667-27.02933333 75.94026667-56.78933333 74.61973334-29.7472-1.32053333-52.5536-36.86293333-50.9248-79.39733334 1.61386667-42.52586667 27.0304-75.94773333 56.76373333-74.63893333 29.7696 1.33013333 52.57066667 36.88106667 50.95146667 79.41653333" fill="#FFFFFF" p-id="6714"></path>
							<path d="M695.40545067 359.0688c-7.8112-18.78293333-86.46613333-39.7088-183.8432-39.7088h-1.04533334c-97.376 0-176.03306667 20.92586667-183.84213333 39.7088a6.66026667 6.66026667 0 0 0-0.57066667 2.672c0 1.3536 0.4192 2.57493333 1.07306667 3.61173333 6.5792 10.416 93.92426667 61.88586667 183.3408 61.88586667h1.04533333c89.41546667 0 176.75733333-51.46666667 183.33973334-61.88373333a6.77546667 6.77546667 0 0 0 1.0688-3.62133334c0-0.9568-0.21333333-1.85173333-0.5664-2.66453333" fill="#FAAD08" p-id="6715"></path>
							<path d="M464.67371733 239.33546667c1.344 16.94506667-7.8688 32-20.5504 33.6448-12.7008 1.64693333-24.0736-10.7552-25.42506666-27.70986667-1.32586667-16.95466667 7.87306667-32.00853333 20.53333333-33.64053333 12.72213333-1.65226667 24.11413333 10.76053333 25.44213333 27.7056m77.97013334 8.464c2.70186667-4.39253333 21.1488-27.488 59.328-19.0784 10.02773333 2.208 14.66666667 5.45706667 15.64586666 6.73706666 1.44533333 1.888 1.84106667 4.576 0.37546667 8.19626667-2.90346667 7.17333333-8.89386667 6.97813333-12.2176 5.5744-2.144-0.90666667-28.736-16.94826667-53.232 6.98986667-1.68426667 1.648-4.69866667 2.21226667-7.55733333 0.25813333-2.85653333-1.95626667-4.0384-5.9232-2.3424-8.67733333" fill="#000000" p-id="6716"></path>
							<path d="M503.82145067 589.328h-1.03146667c-67.80586667 0.80213333-150.0224-8.00426667-229.6384-23.38133333-6.81706667 38.67946667-10.93333333 87.29386667-7.3984 145.27573333 8.928 146.54293333 97.728 238.65173333 234.79253333 239.99573333H506.11691733c137.06453333-1.344 225.86453333-93.4528 234.79466667-239.99573333 3.53493333-57.98613333-0.58346667-106.60053333-7.40266667-145.2832-79.63093333 15.38453333-161.86133333 24.19626667-229.68746666 23.3888" fill="#FFFFFF" p-id="6717"></path>
							<path d="M310.69291733 581.3504v146.63253333s69.28746667 13.552 138.69973334 4.17066667V596.896c-43.97333333-2.4128-91.40053333-7.79093333-138.69973334-15.5456" fill="#EB1C26" p-id="6718"></path>
							<path d="M806.50411733 427.2384s-130.112 43.07946667-302.6592 44.30826667h-1.02613333c-172.26346667-1.22346667-302.21653333-44.16106667-302.66026667-44.30826667l-43.5776 114.08213333c108.9984 34.464 244.0928 56.67733333 346.23786667 55.38773334l1.024-0.00213334c102.15253333 1.29706667 237.22666667-20.91733333 346.24-55.3856l-43.57866667-114.08213333z" fill="#EB1C26" p-id="6719"></path>
						</svg>
					</a>
					<a :href="introduction.bilibili" v-if="introduction.bilibili" target="_blank" class="ui circular icon button">
						<svg style="width: 1em!important;height: 1em!important;" t="1588657033123" class="icon" viewBox="0 0 1129 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4873" width="200" height="200">
							<path d="M234.908525 9.656195a80.468288 80.468288 0 0 1 68.398044 0 167.374038 167.374038 0 0 1 41.84351 30.577949l160.936576 140.819503H621.156306L782.092881 40.234144a168.983404 168.983404 0 0 1 41.84351-30.577949 80.468288 80.468288 0 0 1 107.022823 66.788678 80.468288 80.468288 0 0 1-17.703024 53.913753 449.817728 449.817728 0 0 1-35.406046 32.187315 232.553351 232.553351 0 0 1-22.531121 18.507706h100.58536a170.59277 170.59277 0 0 1 118.288383 53.10907A171.397453 171.397453 0 0 1 1128.106519 352.4511v462.692655a325.896565 325.896565 0 0 1-4.023415 70.00741 178.639599 178.639599 0 0 1-80.468288 112.655603 173.006819 173.006819 0 0 1-92.53853 25.749852H212.377404a341.18554 341.18554 0 0 1-72.421459-4.023415 177.834916 177.834916 0 0 1-111.046237-80.468287A172.202136 172.202136 0 0 1 1.550491 846.526387V388.66183A360.497929 360.497929 0 0 1 1.550491 321.873151a177.030233 177.030233 0 0 1 160.936575-143.233552h105.413457c-16.89834-12.070243-31.382632-26.554535-46.671607-39.429461a80.468288 80.468288 0 0 1-25.749852-65.983996A80.468288 80.468288 0 0 1 234.908525 9.656195M216.400819 321.873151a80.468288 80.468288 0 0 0-63.569948 57.937167 108.632188 108.632188 0 0 0 0 30.577949v380.615001a80.468288 80.468288 0 0 0 55.523119 80.468288 106.21814 106.21814 0 0 0 34.601364 5.63278h654.207179a80.468288 80.468288 0 0 0 76.444873-47.47629 112.655603 112.655603 0 0 0 8.046829-53.10907v-354.060465a135.186723 135.186723 0 0 0 0-38.624779 80.468288 80.468288 0 0 0-52.304387-54.718435 129.553943 129.553943 0 0 0-49.890338-7.242146H254.220914a268.764081 268.764081 0 0 0-37.820095 0z m0 0"
							      fill="#20B0E3" p-id="4874"></path>
							<path d="M348.368811 447.40368a80.468288 80.468288 0 0 1 55.523118 18.507706 80.468288 80.468288 0 0 1 28.163901 59.546533v80.468287a80.468288 80.468288 0 0 1-16.093658 51.499705 80.468288 80.468288 0 0 1-131.967992-9.656195 104.608774 104.608774 0 0 1-10.460877-54.718436v-80.468287a80.468288 80.468288 0 0 1 70.00741-67.593362z m416.021047 0a80.468288 80.468288 0 0 1 86.101068 75.64019v80.468288a94.147897 94.147897 0 0 1-12.070243 53.10907 80.468288 80.468288 0 0 1-132.772675 0 95.757262 95.757262 0 0 1-12.874926-57.132485v-80.468287a80.468288 80.468288 0 0 1 70.00741-70.812093z m0 0" fill="#20B0E3" p-id="4875"></path>
						</svg>
					</a>
					<a :href="introduction.netease" v-if="introduction.netease" target="_blank" class="ui circular icon button">
						<svg style="width: 1em!important;height: 1em!important;" t="1588659244629" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10201" width="200" height="200">
							<path d="M627.086668 5.114963c28.132297-7.672445 58.822075-7.672445 86.954372 0 33.24726 7.672445 63.937038 23.017334 89.511853 43.477186 10.229926 7.672445 17.902371 15.344889 23.017334 28.132297 7.672445 17.902371 5.114963 38.362223-5.114963 53.707112-7.672445 12.787408-23.017334 23.017334-40.919704 25.574815-12.787408 2.557482-25.574815 0-38.362223-7.672445-5.114963-2.557482-10.229926-10.229926-17.902371-12.787407-17.902371-10.229926-35.804741-20.459852-56.264593-17.902371-15.344889 0-28.132297 7.672445-35.804742 17.902371-10.229926 10.229926-12.787408 23.017334-10.229926 35.804741 7.672445 25.574815 12.787408 53.707112 20.459853 79.281927 51.14963 2.557482 99.741779 15.344889 143.218965 40.919704 40.919704 25.574815 79.281927 58.822075 109.971705 97.184298 25.574815 33.24726 46.034667 71.609483 56.264593 112.529187 12.787408 43.477186 17.902371 89.511853 12.787408 132.989039-2.557482 38.362223-10.229926 74.166964-23.017334 109.971705-33.24726 84.39689-92.069335 161.121336-171.351261 209.713485-56.264593 35.804741-122.759113 58.822075-189.253633 66.49452-46.034667 5.114963-92.069335 5.114963-138.104002-2.557482-94.626816-15.344889-181.581188-61.379556-250.633189-130.431558-66.49452-66.49452-112.529187-153.448891-132.989039-245.518225-7.672445-69.052001-7.672445-138.104002 7.672445-207.156004 17.902371-81.839409 61.379556-161.121336 117.644149-222.500892 48.592149-51.14963 107.414224-89.511853 171.351262-117.64415 7.672445-2.557482 12.787408-5.114963 20.459852-7.672444 15.344889-2.557482 30.689778 0 43.477186 10.229926 17.902371 12.787408 25.574815 33.24726 23.017334 53.707112-2.557482 20.459852-17.902371 38.362223-35.804741 46.034667-63.937038 25.574815-122.759113 69.052001-163.678818 122.759113C205.102218 373.392302 179.527402 432.214377 171.854958 493.593933c-7.672445 61.379556 0 122.759113 20.459852 181.581188 30.689778 84.39689 94.626816 156.006373 173.908743 196.926077 48.592149 25.574815 102.299261 38.362223 156.006373 38.362223 43.477186 0 89.511853-7.672445 130.431558-23.017334 35.804741-12.787408 71.609483-33.24726 99.741779-58.822074 28.132297-23.017334 51.14963-53.707112 66.494519-84.396891 7.672445-15.344889 17.902371-33.24726 20.459853-51.14963 15.344889-51.14963 17.902371-107.414224 2.557481-158.563854-12.787408-43.477186-38.362223-81.839409-71.609482-109.971706-15.344889-12.787408-30.689778-25.574815-48.592149-35.804741-15.344889-7.672445-30.689778-15.344889-48.592149-17.902371 12.787408 46.034667 23.017334 92.069335 35.804741 135.546521 2.557482 10.229926 5.114963 23.017334 5.114963 33.24726 2.557482 46.034667-15.344889 94.626816-46.034667 130.431557-28.132297 33.24726-69.052001 58.822075-112.529187 66.49452-46.034667 10.229926-97.184298 0-138.104002-25.574815-38.362223-25.574815-66.49452-63.937038-81.839409-104.856743-7.672445-23.017334-12.787408-48.592149-12.787407-74.166964-2.557482-56.264593 12.787408-109.971705 43.477185-156.006373 35.804741-53.707112 94.626816-92.069335 158.563855-109.971705-5.114963-17.902371-10.229926-35.804741-12.787408-53.707112-12.787408-38.362223-10.229926-81.839409 7.672445-115.086668 10.229926-20.459852 23.017334-38.362223 40.919704-51.149631C583.609483 25.574815 604.069335 12.787408 627.086668 5.114963m-148.333928 414.312006c-17.902371 17.902371-28.132297 40.919704-33.24726 63.937038-5.114963 20.459852-5.114963 43.477186 0 66.49452 5.114963 23.017334 17.902371 46.034667 38.362223 61.379556 15.344889 10.229926 35.804741 15.344889 56.264594 10.229926 35.804741-5.114963 63.937038-38.362223 63.937038-74.166964-2.557482-7.672445-2.557482-17.902371-5.114963-25.574815-12.787408-48.592149-25.574815-99.741779-38.362223-148.333928-30.689778 7.672445-58.822075 23.017334-81.839409 46.034667z"
							      fill="#E72D2C" p-id="10202"></path>
						</svg>
					</a>
					<a :href="introduction.email" v-if="introduction.email" class="ui circular icon button">
						<svg style="width: 1em!important;height: 1em!important;" t="1588659775989" class="icon" viewBox="0 0 1365 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24547" width="200" height="200">
							<path d="M684.00064 607.733333L1282.005973 9.728A133.077333 133.077333 0 0 0 1232.00064 0h-1098.666667c-16.938667 0-33.205333 3.2-48.138666 8.938667l598.805333 598.794666z" p-id="24548"></path>
							<path d="M684.00064 728.394667l-664.533333-664.533334A132.48 132.48 0 0 0 0.00064 133.333333v757.333334C0.00064 964.266667 59.733973 1024 133.333973 1024h1098.666667c73.6 0 133.333333-59.733333 133.333333-133.333333v-757.333334a133.013333 133.013333 0 0 0-18.528-67.733333L684.00064 728.394667z" p-id="24549"></path>
						</svg>
					</a>
				</div>
				<div>
					<el-collapse accordion>
						<el-collapse-item :title="item.title" :name="index" v-if="item.title" v-for="(item,index) in introduction.favorites" :key="index">
							<div>{{ item.content }}</div>
						</el-collapse-item>
					</el-collapse>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'

	export default {
		name: "Introduction",
		computed: {
			...mapState(['introduction'])
		},
		watch: {
			'introduction.rollText'() {
				if (this.introduction.rollText.length != 0) {
					//等待 id="rollText"的div加载完毕
					this.$nextTick(() => {
						this.rollText()
					})
				}
			}
		},
		methods: {
			rollText() {
				let r = document.getElementById('rollText')
				let l = ""
				let o = this.introduction.rollText.map(function (r) {
					return r + ""
				})
				let a = 2
				let g = 1
				let s = 5
				let d = 75
				let b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"]
				let c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}

				function t() {
					return b[Math.floor(Math.random() * b.length)]
				}

				function e() {
					return String.fromCharCode(94 * Math.random() + 33)
				}

				function n(r) {
					for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
						let l = document.createElement("span")
						l.textContent = e(), l.style.color = t(), n.appendChild(l)
					}
					return n
				}

				function i() {
					let t = o[c.skillI]
					c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
				}

				i()
			}
		}
	}
</script>

<style>
	.el-collapse-item {
		padding-left: 15px;
		padding-right: 15px;
	}

	.el-collapse-item .el-collapse-item__content {
		padding-bottom: 10px;
	}
</style>